<template>
  <ContentBox :has-corner="true" class="community-complaint">
    <ContentBoxTitle class="community-complaint__title" :title="title" />
    <div class="community-complaint__content">
      <div class="community-complaint__content__sumarry">
        <div v-for="el of txtList" :key="el.txt">
          <span>{{ el.txt }}：</span>
          <span class="processed-count">{{ el.value }}</span>
        </div>
      </div>
      <div class="community-complaint__content__body swiper-no-swiping">
        <swiper ref="mySwiper" :options="swiperOptions" :style="{height: $base * 210 + 'px'}">
          <swiper-slide v-for="i in 4" :key="i">
            <div :style="{height: $base * 190 + 'px', padding: $base * 5 + 'px'}">
              <ContentBox
                v-for="(item, index) of list"
                :key="index"
                class="remove-border community-complaint__item"
                :has-corner="true"
              >
                <div class="community-complaint__item__title">
                  <div class="community-complaint__item__title__date">{{ item.date }}</div>
                  <div class="community-complaint__item__title__address">{{ item.address }}</div>
                </div>
                <div class="community-complaint__item__content">
                  <div class="community-complaint__item__content__label">内容:</div>
                  <div class="community-complaint__item__content__text">{{ item.content }}</div>
                </div>
                <div
                  :class="['community-complaint__item__status', item.status === 0 ? 'processed' : 'unprocessed']"
                >
                  <span class="text">{{ item.status === 0 ? '已处理' : '未处理' }}</span>
                </div>
              </ContentBox>
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </div>
  </ContentBox>
</template>

<script>
import ContentBox from '@/components/ContentBox'
import ContentBoxTitle from '@/components/ContentBoxTitle'

export default {
  components: {
    ContentBox,
    ContentBoxTitle,
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    txtList: {
      type: Array,
      default: () => []
    },
    list: {
      type: Array,
      default: () => []
    },
  },
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        observer: true,//修改swiper自己或子元素时，自动初始化swiper 
        observeParents: true,//修改swiper的父元素时，自动初始化swiper 
        loop: true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        },
        effect: 'coverflow'
      }
    }
  },
  methods: {
    getStatusImg (status) {
      return status;
    }
  }
}
</script>

<style lang="scss">
.community-complaint {
  width: $base * 360px;
  height: $base * 325px;

  .content-box-title__content {
    width: $base * 300px;
  }
}
.community-complaint__content {
  padding: $base * 8px $base * 19px $base * 19px $base * 19px;
  text-align: left;
  color: $txt_c4;
}
.community-complaint__content__body {
  margin-top: $base * 14px;
  .content-box {
    width: 100%;
    height: $base * 90px;
    padding: $base * 10px $base * 16px $base * 10px $base * 16px;
    font-size: $base * 14px;

    & + .content-box {
      margin-top: $base * 20px;
    }
  }
  .community-complaint__item {
    position: relative;
    .community-complaint__item__status {
      position: absolute;
      top: $base * 2px;
      right: $base * 2px;
      width: 0;
      height: 0;
      border-top: $base * 32px solid red;
      border-left: $base * 54px solid transparent;
      .text {
        transform: rotateZ(30deg) scale(0.8);
        width: $base * 54px;
        position: absolute;
        right: $base * -6px;
        top: $base * -32px;
        text-align: right;
        color: #fff;
      }

      &.processed {
        border-top-color: #1abee4;
      }
      &.unprocessed {
        border-top-color: $txt_c2;
      }
    }
  }
  .community-complaint__item__title {
    display: flex;
    padding-right: $base * 36px;
    align-items: center;
    .community-complaint__item__title__date {
      // flex: 1;
      flex-shrink: 0;
    }
    .community-complaint__item__title__address {
      padding-left: $base * 8px;
      color: #fff;
      font-size: $base * 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
    }
  }
  .community-complaint__item__content {
    color: #fff;
    font-size: $base * 14px;
    margin-top: $base * 6px;
    display: flex;
    padding-right: $base * 36px;
    height: calc(100% - 32px); // TODO: $base*16px
    line-height: $base * 18px;
    .community-complaint__item__content__label {
      flex-shrink: 0;
    }
    .community-complaint__item__content__text {
      padding-left: $base * 6px;
      height: 100%;
      overflow: auto;
    }
  }
}
.community-complaint__content__sumarry {
  padding: 0 $base * 5px;
  font-size: $base * 14px;
  display: flex;
  > div:nth-child(1) .processed-count {
    color: $txt_c1;
  }
  > div:nth-child(2) .processed-count {
    color: $txt_c2;
  }
  > div:nth-child(3) .processed-count {
    color: $txt_c3;
  }
  .processed-count {
    font-size: $base * 16px;
    margin-right: $base * 20px;
    font-weight: 600;
  }
}
.remove-border {
  border: none;
}
// 去除 slider 的样式
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-left {
  background-image: none !important;
}
</style>